<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>09 - stateless prop validation</title>
</head>
<body>
<div id="react-container"></div>

<script src="https://unpkg.com/prop-types/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<script type="text/babel">

    const { Component } = React
    const { render } = ReactDOM

    const Summary = ({ingredients, steps, title}) =>
        <div className="summary">
            <h1>{title}</h1>
            <p>
                <span>{ingredients} Ingredients | </span>
                <span>{steps} Steps</span>
            </p>
        </div>

    Summary.propTypes = {
        ingredients: PropTypes.number,
        steps: PropTypes.number,
        title: (props, propName) =>
            (typeof props[propName] !== 'string') ?
                new Error("A title must be a string") :
                (props[propName].length > 20) ?
                    new Error(`title is over 20 characters`) :
                    null
    }

    Summary.defaultProps = {
        ingredients: 0,
        steps: 0,
        title: '[Untitled Recipe]'
    }

    render(
        <Summary title="really delicous eggs and biscuits" />,
        document.getElementById('react-container')
    )

</script>

</body>
</html>
